<template>
  <div class="app-container">
    <div class="app-title">
      <span>界面首页</span>
    </div>
    <div class="table-title">
      <div al>目前共有 {{ count }} 条事项待您办理</div>
      <div>统发月份:{{salaryMonth}}</div>
    </div>
    <!-- 表格部分 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :stripe="true"
      :height="tableHeight"
      fit
      style="width: 100%;"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      @row-dblclick="dblclick"
    >
      <template slot="empty">
        <tableEmpty />
      </template>
      <el-table-column label="业务类型" align="center" >
        <template slot-scope="{row}" align="left">
          <span>{{ row.businessType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="待办事项" align="center">
        <template slot-scope="{row}">
          <span>待办</span><span style="font-weight:600; padding: 6px">{{ row.dataCount }}</span><span>条</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->
  </div>
</template>

<script>
import tableEmpty from '@/components/table/empty'
import { getAuditCount,getSalaryMonth,updateSalaryBackLog } from '@/api/home'
export default {
  name: 'interface',
  components: { tableEmpty },
  filters: {

  },
  data() {
    return {
      tableHeight: null,
      listLoading: false,
      list: [],
      salaryMonth:'',
      count: 0
    }
  },
  created() {
    this.getList()
    this.getSalaryMonth()
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  methods: {
    // 获取table高度的方法
    getTbHeight() {
      this.tableHeight = window.innerHeight - 160
    },
    getList() {
      this.listLoading = true
      this.count=0
      const menuParam = this.$store.getters.menuParam
      getAuditCount(menuParam).then((response) => {
        this.list = response.data
        this.list.forEach(item => {
          this.count += item.dataCount
        })
        this.listLoading = false
      })
    },
    getSalaryMonth(){
      getSalaryMonth().then((response) => {
        this.salaryMonth = response.data
      })
    },
    // 双击
    dblclick(row, column, event) {
      if(row.dataId!=null){
        const data = {}
        data['id'] = row.dataId
        updateSalaryBackLog(data).then((response) => {
        this.getList()
      })
      }
      //this.$router.push('/' + row.guid)
      this.$router.push({name:row.guid,
          params: {
            isback: row.isback
          }})
    }
  }
}
</script>
<style scoped lang="scss">
.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #DCDFE6;
}
.table-title {
  margin-top: 10px;
  margin-bottom: 10px;
  div:nth-child(1) {
    text-align: center;
    margin-left: 1%;
  }
  div:nth-child(2) {
    text-align: right;
    margin:0 auto;
    font-weight: 320;
  }
  
}
</style>
